<!-- 七大区地图组件 -->
<template>
  <view>
    <view
      :style="{ paddingLeft: dropDownCode ? '30rpx' : 0 }"
      class="area-card"
      v-for="(area, index) of AREA_CODES_NAME"
      :key="index"
    >
      <view class="area-card-title">{{ area.areaName }}</view>
      <view class="area-card-content">
        <view
          @click="getCodeList(code, index)"
          v-for="(code, index) of area.province"
          :class="[code.active === true ? 'active' : 'wobucunzaiclass']"
          :key="index"
          class="area-box"
          >{{ code.name }}</view
        >
      </view>
    </view>
    <!-- 按钮是否显示根据 btnFlag 处理 -->
    <u-button
      v-if="btnFlag"
      type="error"
      :ripple="true"
      ripple-bg-color="#fff"
      style="margin-top: 120rpx"
      @click="handleGoto"
      >确定
    </u-button>
    <!-- 用来提示 -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { AREA_CODES_NAME, AREA_CODES } from 'pages/common/Dict/index.js'

export default {
  props: {
    btnFlag: {
      type: Boolean,
      default: false,
    },
    dropDownCode: {
      type: Boolean,
      default: false,
    },
    EditCodeList: {
      type: Array,
      default: () => {
        return []
      },
    },
    edList: {
      type: Array,
      default: () => {
        return []
      },
    },
    addFlag: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      selectAll: true,
      AREA_CODES_NAME,
      codeList: [],
      codeListSet: [],
      idx: 0,
      idxx: 0,
    }
  },
  methods: {
    showToast(title, type) {
      this.$refs.uToast.show({
        title,
        type: type || 'error',
      })
    },
    // 选择完成进行路由跳转
    handleGoto() {
      // 如果没有选中，添加拦截，要求选中
      let selectAll = this.codeList.every((code) => {
        return code['active'] === false
      })
      if (selectAll) {
        this.showToast('请选择地区')
        return
      } else {
        // 传递数据过去
        if (this.codeList.length > 1 && this.codeList.includes('全国')) {
          this.codeList = this.codeList.filter((item) => item != '全国')
        }
        this.$emit('getSelectCodeList', this.codeList)
      }
    },

    // 获取地区值
    getCodeList(area, index) {
      area['active'] = !area['active']
      if (area.name === '全国') {
        this.codeList = []
        for (let i = 0; i < AREA_CODES_NAME.length; i++) {
          for (let k = 0; k < AREA_CODES_NAME[i].province.length; k++) {
            AREA_CODES_NAME[i].province[k]['active'] = false
          }
          AREA_CODES_NAME[0].province[index]['active'] = true
          this.selectAll = true
        }
      } else {
        for (let i = 0; i < AREA_CODES_NAME.length; i++) {
          for (let k = 0; k < AREA_CODES_NAME[i].province.length; k++) {
            AREA_CODES_NAME[0].province[0]['active'] = false
            this.selectAll = false
          }
        }
      }

      if (area['active'] === true) {
        let flag = this.codeList.some((item) => item.includes(area.code))
        if (!flag) this.codeList.push(area.code)
      } else {
        this.codeList.forEach((code, index) => {
          AREA_CODES.forEach((codeItem) => {
            if (code == codeItem.code) {
              this.$set(this.codeList, index, codeItem.name)
            }
          })
        })

        this.idx = [...this.codeList].indexOf(area.name)
        this.codeList.splice(this.idx, 1)
        if (this.codeList.length < 1) this.codeList = []
      }
      this.codeList = this.selectAll === false ? this.codeList : [area.code]
      // 将全国过滤，排他性
      if (this.codeList.length > 1) {
        this.codeList = this.codeList.filter((item) => item != '10000')
      }
      this.$emit('getSelectCodeList', this.codeList)
      // 下面是传递给首页列表搜索用的
      this.$emit('getCodeSeletList', this.codeList)
    },

    // 清除选中项
    clearSelectCodeList() {
      AREA_CODES_NAME.forEach((area) => {
        area.province.forEach((code) => {
          this.$set(code, 'active', false)
        })
      })
      this.codeList = []
    },
  },
  // 同步父组件传递过来回显的数据
  watch: {
    EditCodeList(newVal) {
      if (newVal?.length < 1) {
        this.clearSelectCodeList()
      } else {
        AREA_CODES_NAME.forEach((area) => {
          area.province.forEach((code) => {
            let flag = newVal.some((item) => item.includes(code.name))
            if (flag) {
              this.$set(code, 'active', true)
            }
          })
        })
      }
    },
    edList(newVal) {
      if (newVal) {
        this.codeList = newVal
      }
    },
  },
  mounted() {
    // 特殊处理添加的时候的逻辑
    if (this.addFlag === true) {
      AREA_CODES_NAME.forEach((area) => {
        area.province.forEach((code) => {
          this.$set(code, 'active', false)
        })
      })
    }
  },
}
</script>
<style lang="scss">
.area-card {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  .area-card-title {
    width: 128rpx;
    font-weight: bold;
    font-size: 32rpx;
    color: #343434;
    margin-right: 60rpx;
  }
  .area-card-content {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    .area-box {
      width: 130rpx;
      margin: 8rpx;
      background-color: #f7f7f7;
      text-align: center;
      line-height: 48rpx;
      height: 48rpx;
      font-size: 26rpx;
      border-radius: 20rpx;
    }
  }
}
.active {
  border: 1px solid red;
  background-color: #fff !important;
}
</style>
